<template>
  <div class="page">
    <div class="pdh" >
      <div class="pdv bd-b-light cf" style="padding: 20px 0;">
        <notify-btn cls="ui btn empty c-primary fs-3 fl" @hit="onGoGroupCreate">
          <i class="if icon-add"></i> 新建班级
        </notify-btn>
      </div>
    </div>
    <div v-if="!isLoading && groups.length > 0" v-for="(n, i) in groups" :key="i" class="weui-cells weui-cells_after-title mgb-s v-mdl">
      <navigator :url="'/pages/user-group/main?groupId=' + n.id" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <div class="weui-cell__hd" v-if="n.avatarUrl">
          <div style="width: 40px;">
            <avatar :src="n.avatarUrl"></avatar>
          </div>
        </div>
        <div class="weui-cell__bd">
          <span v-if="n.name">{{n.name}}</span>
          <open-data v-else class="fs-l" type="groupName" :open-gid="n.openGroupId"></open-data>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access avatars fs-xxs">
        </div>
      </navigator>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import NotifyBtn from '@/components/notify-btn'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'

export default {
  mixins: [base],
  data () {
    return {
      isLoading: true
    }
  },
  components: {
    PageCommon,
    Avatar,
    NotifyBtn
  },
  computed: {
    ...mapGetters([
      'groups',
      'role'
    ])
  },
  async onPullDownRefresh() {
    await this.getGroups()
    wx.stopPullDownRefresh()
  },
  methods: {
    goCreate () {
      wx.navigateTo({
        url: '/pages/document-create/main'
      })
    },
    onGoGroupCreate () {
      wx.navigateTo({
        url: '/pages/user-group-create/main'
      })
    },
    async loginBack () {
      await this.getGroups()
      this.isLoading = false
    },
    ...mapActions([
      'getGroups'
    ])
  }
}
</script>

<style scoped lang="less">
.weui-cells:before{
  border-top: none;
}
</style>
